<template>
  <PageContainer>
    <Header title="我的资料" />
    <view class="container">
      <view class="personal-data card-panel">
        <!-- 头部 -->
        <view class="panel-header">
          <view class="top card-panel--row">
            <view></view>
            <view class="edit-btn" @click="toEdit">编辑</view>
          </view>
          <view class="avatar">
            <TImage
              :src="userInfo?.avatar"
              width="160rpx"
              height="160rpx"
              border-radius="50%"
              error-img-type="person"
              preview
            />
          </view>
          <view class="top card-panel--row">
            <text class="name">{{ userInfo?.name || userInfo?.userName }}</text>
            <!-- <view class="edit-btn" @click="toEdit">编辑</view> -->
          </view>
          <!-- <view class="bottom card-panel--row">
          <view v-if="userInfo?.sex === SexEnum.MALE" class="sex sex-male">
            <text class="ali-icon">&#xe617;</text>
          </view>
          <view v-if="userInfo?.sex === SexEnum.FEMALE" class="sex sex-female">
            <text class="ali-icon">&#xe60f;</text>
          </view>
          <view v-if="getApplicationType" class="application-type">{{ getApplicationType }}</view>
        </view> -->
        </view>

        <!-- <view class="card-panel--row">
        <view class="card-panel--row__item" style="margin-right: 32rpx">
          <text class="ali-icon">&#xe610;</text>
          <text>
            {{ userInfo?.birthday ? formatToDateTime(userInfo?.birthday, 'YYYY/MM/DD') : emptyStr }}
          </text>
        </view>
        <view class="card-panel--row__item">
          <text class="ali-icon">&#xe613;</text>
          <text>{{ getAddress }}</text>
        </view>
      </view> -->
        <!-- 学校 -->
        <!-- <view class="card-panel--row">
        <view class="card-panel--row__item">
          <text class="ali-icon">&#xe618;</text>
          <text>{{ userInfo?.schoolName || emptyStr }}</text>
        </view>
      </view> -->
        <!-- 电话 -->
        <view class="card-panel--row">
          <view class="card-panel--row__item">
            <text class="ali-icon">&#xe615;</text>
            <text>{{ userInfo?.phone || emptyStr }}</text>
          </view>
        </view>
        <!-- 微信 -->
        <view class="card-panel--row">
          <view class="card-panel--row__item">
            <text class="ali-icon">&#xe619;</text>
            <text>{{ userInfo?.wechatId || emptyStr }}</text>
          </view>
        </view>
        <!-- 邮箱 -->
        <view class="card-panel--row">
          <view class="card-panel--row__item">
            <text class="ali-icon">&#xe616;</text>
            <text>{{ userInfo?.email || emptyStr }}</text>
          </view>
        </view>
      </view>

      <view class="card-panel unit-list">
        <view class="panel-header">
          <view class="card-panel--row">
            <view class="title">我的单位</view>
            <view class="edit-btn" @click="toUnitList">单位管理</view>
          </view>
        </view>
        <view v-if="unitList.length">
          <template v-for="(v, i) in unitList" :key="v.id">
            <UnitItem
              :item="v"
              :index="i"
              :company-id="myUserInfo.companyId"
              :is-show-set-default="false"
              :is-edit="false"
              :boxStyle="{
                borderBottom: unitList.length - 1 === i ? 'unset' : '1px rgba(0, 0, 0, .1) solid',
              }"
            />
          </template>
        </view>
        <Empty v-else />
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* myProfile 我的资料 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';
  import TImage from '@/components/TImage/index.vue';
  import Dictionary from '@/utils/dictionary';
  import { computed, ref, unref } from 'vue';
  import { navigateTo, onLoad } from '@/router';
  import { onPullDownRefresh } from '@dcloudio/uni-app';
  import { getMemberData } from '@/api/mine';
  import type { IUserInfo } from '@/api/login/types';
  import UnitItem from '../components/UnitItem.vue';
  import Empty from '@/components/Empty/Empty.vue';
  import type { FunctionArgs } from '@vueuse/core';

  const useUser = useUserStoreWithOut();
  const { cocInfo, unitList, userInfo: myUserInfo } = storeToRefs(useUser);
  const userInfo = ref<IUserInfo>();

  const emptyStr = ref('未知');

  async function getData() {
    const res = await getMemberData();
    userInfo.value = res;
    uni.stopPullDownRefresh();
  }
  let success: FunctionArgs | undefined;
  onLoad<'myProfile'>(async (op) => {
    success = op.success;
    await getData();
    await useUser.setUnitList();
  });

  const getAddress = computed(() => {
    const str = userInfo.value?.nativePlaceStr;
    return str ? str.split(',').join('-') : emptyStr.value;
  });

  const getApplicationType = computed(() => {
    const types = Dictionary.getLocal('memberType');
    return types.find((v) => v.dictValue === unref(cocInfo).applyType)?.dictLabel ?? '';
  });

  function toEdit() {
    navigateTo({
      name: 'editMyProfile',
      options: {
        success: () => {
          getData();
          success?.();
        },
      },
    });
  }

  function toUnitList() {
    navigateTo({
      name: 'myUnit',
    });
  }

  onPullDownRefresh(async () => {
    await getData();
    await useUser.setUnitList();
  });
</script>

<style lang="scss" scoped>
  .container {
    padding: 32rpx;
    padding-bottom: 60rpx;

    .card-panel {
      padding: 32rpx;
      background-color: #fff;
      border-radius: 16rpx;
      box-shadow: 0px 4rpx 24rpx 0px #96979929;
      margin-top: 24rpx;
      &--row {
        display: flex;
        align-items: center;
        padding-bottom: 24rpx;
        .ali-icon {
          font-size: 32rpx;
        }
        &__item {
          display: flex;
          align-items: center;
          color: #666664;
          font-size: 28rpx;
          .ali-icon {
            margin-right: 8rpx;
          }
        }
      }
    }

    .avatar {
      text-align: center;
      margin-bottom: 56rpx;
    }
    .edit-btn {
      font-size: 24rpx;
      color: #2878ff;
      padding: 8rpx 16rpx;
      background-color: #d0f7ff;
      border-radius: 24rpx;
    }
    .personal-data {
      .panel-header {
        margin-bottom: 32rpx;

        .top {
          justify-content: space-between;
          .name {
            font-size: 48rpx;
          }
        }
        .bottom {
          padding-bottom: 0;
          .sex {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            text-align: center;
            line-height: 48rpx;
            margin-right: 16rpx;

            &.sex-male {
              background-color: #d0f7ff;
              .ali-icon {
                color: #2878ff;
              }
            }
            &.sex-female {
              background-color: #fee3e0;
              .ali-icon {
                color: #fc7265;
              }
            }
          }
          .application-type {
            height: 40rpx;
            line-height: 40rpx;
            padding: 0 12rpx;
            border-radius: 20rpx;
            background: var(--golden, linear-gradient(90deg, #fdedc7 0%, #f7d9a2 100%));
            color: #ea5e0e;
            font-size: 24rpx;
          }
        }
      }
    }

    .unit-list {
      .card-panel--row {
        padding-bottom: 0;
        justify-content: space-between;
        font-weight: 400;
        .title {
          font-size: 36rpx;
          color: #333;
        }
      }
    }
  }
</style>
